<template>
  <q-form @submit="onSubmit"
          greedy
          @reset="$emit('hideDialog')"
          ref="myForm"
          class="dialog-content block">
    <div class="content-wrapper scrollbar"  :style="{height: isCompete? '576px': '515px'}">
      <div class="detail-container flex">
        <div class="margin-r-20">网关序列号: {{ driverParams.gatewaySN || '-' }}</div>
        <div class="margin-r-20">网关型号: {{ driverParams.productName || '-' }}</div>
        <div class="margin-r-20">驱动: {{ driverConfigData.driverName || '-' }}</div>
      </div>
      <q-separator class="margin-t-20 margin-b-20" />
      <div class="title">采集方式</div>
      <div class="row">
        <div class="col">
          <q-select v-model="form.type" :options="collectTypeList" outlined dense options-dense emit-value
                    map-options style="width: 280px"
                    :rules="[]">
            <template v-slot:before>
              <label class="text-right name label-width">采集方式:</label>
            </template>
          </q-select>
        </div>
      </div>
      <div class="title" v-if="netPort">网口信息</div>
      <div class="row"  v-if="netPort">
        <div class="col">
          <q-input v-model="form.collectIp"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[val => val !== '' || '请输入IP地址', val => (/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>IP地址:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-input v-model="form.collectPort"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[val => val !== '' || '请输入设备端口',val => (val && /^\d+$/g.test(val)) || '只能输入数字']"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span>  <span>设备端口:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>
      <div class="title" v-if="seriesPort">串口配置</div>
      <div class="row" v-if="seriesPort">
        <div class="col">
          <q-select v-model="form.serialPort" :options="serialPortList" outlined dense options-dense emit-value
                    map-options style="width: 280px"
                    :rules="[val => val !== null && val !== '' || '请选择串口号']">
            <template v-slot:before>
              <label class="text-right name label-width"><span class="text-red">*</span> 串口号:</label>
            </template>
          </q-select>
        </div>
        <div class="col">
          <q-input v-model="form.baudRate"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[val => val !== '' || '请输入波特率']"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>波特率:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>

      <div class="row" v-if="seriesPort">
        <div class="col">
          <q-input v-model="form.dataBit"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[val => val !== '' || '请输入数据位长度']"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>数据位长度:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-input v-model="form.stopBit"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[val => val !== '' || '请输入停止位长度']"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>停止位长度:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>
      <div class="row" v-if="seriesPort">
        <div class="col">
          <q-input v-model="form.parity"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[val => val !== '' || '请输入校验方式']"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>校验方式:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-input v-model="form.flowControl"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[val => val !== '' || '请输入设备端口']"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>流控:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>

      <div class="title">采集配置</div>
      <div class="row">
        <div class="col">
          <q-input v-model="form.collectCycle"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="form.collectCycle ? [val => (val && /^\d+$/g.test(val)) || '只能输入数字'] : [() => true]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>采集周期(ms):</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-input v-model="form.collectInterval"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="form.collectInterval ? [val => (val && /^\d+$/g.test(val)) || '只能输入数字'] : [() => true]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>采集间隔:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>

      <div class="title">文件传输配置</div>
      <div class="row">
        <div class="col">
          <q-input v-model="form.fileIp"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[
                       val => val ? /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val) || '请输入合法ip地址' : ()=> true]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>传输地址:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-input v-model="form.filePort"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[
                       val => val ? /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(val) || '请输入合法端口' : () => true]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>传输端口:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <q-select v-model="form.fileProtocol" :options="dncProtocolTypes" outlined dense options-dense emit-value
                    map-options style="width: 280px"
                    :rules="[]">
            <template v-slot:before>
              <label class="text-right name label-width">传输协议:</label>
            </template>
          </q-select>
        </div>
        <div class="col">
          <q-input v-model="form.fileUsername"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>用户名:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <q-input v-model="form.filePassword"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>密码:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-input v-model="form.fileDev"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                 <span>传输根目录:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>
      <div class="title">在线加工配置</div>
      <div class="row">
        <div class="col">
          <q-input v-model="form.dncPort"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                 <span>采集端口:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-select v-model="form.dncProtocol" :options="dncProtocolTypes" outlined dense options-dense emit-value
                    map-options style="width: 280px"
                    :rules="[]">
            <template v-slot:before>
              <label class="text-right name label-width">传输协议:</label>
            </template>
          </q-select>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <q-input v-model="form.dncUsername"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>用户名:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div class="col">
          <q-input v-model="form.dncPassword"
                   dense
                   emit-value
                   map-options
                   style="width: 280px"
                   :rules="[]"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span>密码:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>
    </div>
    <q-separator/>
    <div class="dialog-footer text-center margin-t-10">
      <q-btn outline
             label="取消"
             color="primary"
             class="q-mr-md"
             type="reset"/>
      <q-btn unelevated
             :label="isCompete ? '完成': '下一步'"
             v-throttle
             :loading="submitting"
             color="primary"
             type="submit"/>
      <span v-if="!isCompete" style="color: #999999;cursor: pointer" class="margin-l-20" @click="skipBind">跳过</span>
    </div>
  </q-form>
</template>

<script>
import BasicDialogMixin from 'src/components/common/basic-dialog/src/basic-dialog-mixin'
import { cncDriverSubDevConf } from '../../../../../boot/miot/list'
import { collectTypeList, dncProtocolTypes, serialPortList } from './constant'

export default {
  name: 'network-port-config',
  mixins: [BasicDialogMixin],
  computed: {
    netPort () {
      return this.form.type === '1'
    },
    seriesPort () {
      return this.form.type === '2'
    }
  },
  props: {
    deviceId: {
      type: [String, Object],
      default: null
    },
    formData: {
      type: Object,
      default: null
    },
    driverConfigData: {
      type: Object,
      default: () => {}
    },
    driverParams: {
      type: Object,
      default: () => {}
    },
    subDevConfigData: {
      type: Object,
      default: () => {}
    },
    isCompete: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    subDevConfigData: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val && Object.keys(val).length > 0) {
          if (this.form.collectIp) {
            this.form.type = '1'
          } else if (this.form.serialPort) {
            this.form.type = '2'
          }
          this.form.collectIp = val.collectIp
          this.form.collectPort = val.collectPort
          this.form.fileIp = val.fileIp
          this.form.filePort = val.filePort
          this.form.fileProtocol = val.fileProtocol
          this.form.fileUsername = val.fileUsername
          this.form.filePassword = val.filePassword
          this.form.dncPort = val.dncPort
          this.form.dncProtocol = val.dncProtocol
          this.form.dncUsername = val.dncUsername
          this.form.dncPassword = val.dncPassword
          this.form.fileDev = val.fileDev
          this.form.serialPort = val.serialPort
          this.form.baudRate = val.baudRate
          this.form.dataBit = val.dataBit
          this.form.stopBit = val.stopBit
          this.form.parity = val.parity
          this.form.flowControl = val.flowControl
          this.form.collectCycle = val.collectCycle
          this.form.collectInterval = val.collectInterval
        }
      }
    }
  },
  data () {
    return {
      dncProtocolTypes: dncProtocolTypes,
      serialPortList: serialPortList,
      collectTypeList: collectTypeList,
      submitting: false,
      form: {
        type: '1',
        dncPort: '',
        dncProtocol: '',
        dncUsername: '',
        dncPassword: '',
        collectCycle: '1000',
        collectInterval: '1000',
        collectIp: '',
        collectPort: '',
        fileIp: '',
        filePort: null,
        fileDev: '',
        fileProtocol: '',
        fileUsername: '',
        filePassword: '',
        serialPort: null,
        baudRate: '',
        dataBit: '',
        stopBit: '',
        parity: '',
        flowControl: ''
      }
    }
  },
  mounted () {
  },
  methods: {
    // 提交表单
    onSubmit () {
      this.submitData()
    },
    // 保存数据
    async submitData () {
      const params = {
        gatewayId: this.driverParams.gatewayId,
        productId: this.driverParams.productId,
        edgeDriverId: this.driverConfigData.edgeDriverId,
        subDeviceId: this.driverParams.subDeviceId,
        boxNum: this.driverParams.boxNum,
        ucloudBoxNum: this.driverParams.ucloudBoxNum,
        collectPort: this.netPort ? this.form.collectPort : '',
        collectIp: this.netPort ? this.form.collectIp : '',
        filePort: this.form.filePort,
        fileIp: this.form.fileIp,
        fileUsername: this.form.fileUsername,
        filePassword: this.form.filePassword,
        serialPort: this.seriesPort ? this.form.serialPort : '',
        baudRate: this.seriesPort ? this.form.baudRate : '',
        dataBit: this.seriesPort ? this.form.dataBit : '',
        stopBit: this.seriesPort ? this.form.stopBit : '',
        parity: this.seriesPort ? this.form.parity : '',
        flowControl: this.seriesPort ? this.form.flowControl : '',
        collectCycle: this.form.collectCycle,
        collectInterval: this.form.collectInterval,
        fileProtocol: this.form.fileProtocol,
        fileDev: this.form.fileDev,
        dncPort: this.form.dncPort,
        dncUsername: this.form.dncUsername,
        dncPassword: this.form.dncPassword,
        dncProtocol: this.form.dncProtocol
      }
      this.submitting = true
      cncDriverSubDevConf(params).then(res => {
        console.log(res)
        this.$emit('successSubmit')
      }).finally(() => {
        this.submitting = false
      })
    },
    // 跳过绑定
    skipBind () {
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          确定要跳过此步骤吗？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      }).onOk(() => {
        this.$emit('bindNone')
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.label-width
  width 120px

.title
  line-height 1
  font-weight 500
  font-size 16px
  color $primary
  margin-bottom 20px

.content-wrapper
  height 515px
  overflow-y auto
  padding 20px

.detail-container
  font-size 14px
  line-height 1
  padding-bottom 14px
</style>
